<!-- 全链路对账结果显示组件 -->
<template>
  <a-steps>
    <a-popover slot="progressDot" slot-scope="{ index, status, title, description, prefixCls }">
      <template slot="content">
        <span>当前状态: {{getStatusDesc(description)}}</span>
        <span v-if="readonly === false && description === '失败'"><a @click="toSuccess(title)">调整成功</a></span>
        <span v-if="readonly === false && description === '成功'"><a @click="toFailed(title)">调整失败</a></span>
      </template>
      <span :class="`${prefixCls}-icon-dot`" /> <!--这个是点状的样式，不能动-->
    </a-popover>
    <a-step v-for="(value, key, index) in listData" :title="key" :description="getStatusDesc(value)"  :status="getStatus(value)" :key="index"/>
  </a-steps>
</template>
<script>

export default {
  name: 'FullLinkResult',
  data () {
    return {
      listData: {"PTPB":"00","UPCC":"01","CB":"NA"},
    }
  },
  props: ['paramData', 'readonly'],
  model: {
    prop: 'paramData',
    event: 'update'
  },
  watch: {
    paramData (val) {
      Object.assign(this.listData, JSON.parse(val))
    }
  },
  methods: {
    toSuccess(system) {
      this.listData[system] = '00'
    },
    toFailed(system) {
      this.listData[system] = '01'
    },
    getStatusDesc(value) {
      switch (value) {
        case "00" : return "成功"
        case "01" : return "失败"
        case "NA" : return "流水缺失"
      }
      return value
    },
    getStatus (value) {
       switch (value) {
         case "00" : return "finish"
         case "01" : return "error"
         case "NA" : return "error"
       }
       return value
    }
  }
}
</script>
